/**
 * Created by xiangjiayu on 2017/7/16.
 */
// 弹窗汇总

import React from 'react';
import {Button, Input, Modal, Popconfirm, Select, Table,Tooltip} from 'antd';

import EditableCell from './EditableCell/index';

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const Search = Input.Search;    //搜所框
const confirm = Modal.confirm;

export default class AddInput extends React.Component {

    constructor(props) {
        super(props);
        //可编辑表格；
        this.columns = [
          {
            title: '区域',
            dataIndex: 'name',
            width: '33.3%',
            className: 'ant-table-th-center',
            render: (text) => (
              <div>
                {text}
              </div>
            ),
          },{
            title: '区域售价',
            dataIndex: 'shoujia',
            width: '33.3%',
            className: 'ant-table-th-center',
            render: (text, record, index) => (
              <div>

                  <EditableCell
                    value={text}
                    onChange={this.onCellChange(index, 'shoujia')}
                  />
              </div>
            ),
          },
           {
            title: '操作',
            dataIndex: 'operation',
            className: 'ant-table-th-center',
            render: (text, record, index) => {
                return (
                    <div className="table-a-cont">
                        <a href="#">编辑</a>
                        {
                            this.state.dataSource.length > 1 ?
                            (
                                <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(index)}>
                                    <a href="#">删除</a>
                                </Popconfirm>
                            ) : null
                        }
                    </div>
                );
            },
          }
        ];
        this.state = {
            //可编辑表格
            dataSource: [{
                key: '0',
                name: <span><span className="link-before-name">南京</span><a className="col-blue ml5" href="javascript:void(0)">更改</a></span>,
                shoujia:'50元/次'
            }, {
                key: '1',
                name: <span><span className="link-before-name">
                    <Tooltip placement="topLeft" title="南京市南京市南京市" arrowPointAtCenter>南京市南京</Tooltip>
                </span><a className="col-blue ml5" href="javascript:void(0)">更改</a></span>,
                shoujia:'50元/次'
            }, {
                key: '2',
                name: <span><span className="link-before-name">南京</span><a className="col-blue ml5" href="javascript:void(0)">更改</a></span>,
                shoujia:'50元/次'
            }, {
                key: '3',
                name: <span><span className="link-before-name">南京</span><a className="col-blue ml5" href="javascript:void(0)">更改</a></span>,
                shoujia:'50元/次'
            }, {
                key: '4',
                name: <span><span className="link-before-name">南京</span><a className="col-blue ml5" href="javascript:void(0)">更改</a></span>,
                shoujia:'50元/次'
            }, {
                key: '5',
                name: <span><span className="link-before-name">南京</span><a className="col-blue ml5" href="javascript:void(0)">更改</a></span>,
                shoujia:'50元/次'
            }],
            count: 6,
        };
    }
    //可编辑表格
    onCellChange = (index, key) => {
        return (value) => {
            const dataSource = [...this.state.dataSource];
            dataSource[index][key] = value;
            this.setState({ dataSource });
        };
    }
    onDelete = (index) => {
        const dataSource = [...this.state.dataSource];
        dataSource.splice(index, 1);
        this.setState({ dataSource });
    }
    handleAdd = () => {
        const { count, dataSource } = this.state;
        const newData = {
            key: count,
            name:<Button type="primary">选择城市</Button>,
            shoujia: <div><Input className="wid-small" id="xx" placeholder="售价"/><span className="danwei">元/次</span></div>,
          }
        ;
        this.setState({
            dataSource: [...dataSource, newData],
            count: count + 1,
        });
        setTimeout(
          function(){
              document.getElementById("cert").scrollTop  = document.getElementById("cert").scrollHeight;
          }, 100)

    }
    render(){
        const { dataSource } = this.state;
        const columns = this.columns;
        return(
            <div>
                <div id="cert" className="modal-table-mh">
                    <Table bordered dataSource={dataSource} columns={columns} pagination={false}/>
                </div>
                <div className="foot-add"><Button onClick={this.handleAdd} type="primary" icon="plus">新增设价</Button></div>
            </div>
        )
    }
}